<template>
  <!-- 组件配置预览[暂未实现] -->
  <el-dialog
    :title="!dataForm.id ? '组件配置预览' : '组件配置预览'"
    :close-on-click-modal="false"
    width="570px"
    :visible.sync="visible"
    append-to-body
  >
    <div>
      <div
        class="bg-phone"
        v-if="
          this.widge.widgetSize == 'larege' || this.widge.widgetSize == 'small'
        "
      >
        <!-- 小组件 start -->
        <div
          style="padding: 69px 33px;"
          v-if="this.widge.widgetSize == 'small'"
        >
          <div class="bg-phone-content" style="text-align: left;">
            <!-- image  /1.8-->
            <!-- * 3 / 4 * 72 / 96 -->
            <img
              :src="this.widge.image"
              :style="
                'border-radius: 25px;width:' +
                  (this.widgeConfig.canvasW * 216) / 384 +
                  'px;height:' +
                  (this.widgeConfig.canvasH * 216) / 384 +
                  'px;text-align:left'
              "
            />
            <div
              :style="
                'text-align:' +
                  this.widgeConfig.textAlign +
                  ';width:' +
                  (this.widgeConfig.elementW * 216) / 384 +
                  'px;position: absolute;color:#' +
                  this.widgeConfig.fontColor +
                  ';height:' +
                  (this.widgeConfig.elementH * 216) / 384 +
                  'px;left:' +
                  (this.widgeConfig.elementX * 216) / 384 +
                  'px;top:' +
                  (this.widgeConfig.elementY * 216) / 384 +
                  'px;font-family:' +
                  this.widgeConfig.fontName +
                  ';line-height:100%;'
              "
            >
              <!-- width:' + this.widgeConfig.elementW /1.8 + 'px; -->
              <img
                v-if="this.widgeConfig.element == 2"
                :src="this.widgeConfig.image"
                :style="
                  'margin-top:0px;height:' +
                    (this.widgeConfig.elementH * 216) / 384 +
                    'px'
                "
              />
              <span
                :style="
                  'font-size:' +
                    (this.widgeConfig.fontSize * 72) / 96 +
                    'px;color:#' +
                    this.widgeConfig.fontColor +
                    ';letter-spacing:' +
                    (this.widgeConfig.spacings == 0
                      ? 0
                      : (this.widgeConfig.spacings / 72) * 96) +
                    'px;line-height:100%;'
                "
                v-else
                >{{ this.widgeConfig.text }}</span
              >
            </div>
          </div>
        </div>
        <!-- 小组件 end -->
        <!-- 大组件 start -->
        <div
          style="padding: 293px 34px 0px 34px;"
          v-if="this.widge.widgetSize == 'larege'"
        >
          <div class="bg-phone-content" style="text-align: left;">
            <!-- width:100%;height:auto 2.76-->
            <!-- image -->
            <img
              :src="this.widge.image"
              :style="
                'border-radius: 25px;width:' +
                  (this.widgeConfig.canvasW * 216) / 384 +
                  'px;height:' +
                  (this.widgeConfig.canvasH * 216) / 384 +
                  'px;text-align:left'
              "
            />
            <!-- width:' + this.widgeConfig.elementW /2 + 'px; -->
            <div
              :style="
                'text-align:' +
                  this.widgeConfig.textAlign +
                  ';width:' +
                  (this.widgeConfig.elementW * 216) / 384 +
                  'px;position: absolute;color:#' +
                  this.widgeConfig.fontColor +
                  ';height:' +
                  (this.widgeConfig.elementH * 216) / 384 +
                  'px;left:' +
                  (this.widgeConfig.elementX * 216) / 384 +
                  'px;top:' +
                  (this.widgeConfig.element == 2
                    ? (this.widgeConfig.elementY * 423) / 752 +
                      (this.widgeConfig.elementH * 216) / 384 / 5
                    : (this.widgeConfig.elementY * 423) / 752) +
                  'px;font-family:' +
                  this.widgeConfig.fontName +
                  ';line-height:100%;'
              "
            >
              <img
                v-if="this.widgeConfig.element == 2"
                :src="this.widgeConfig.image"
                :style="
                  'margin-top:0px;height:' +
                    (this.widgeConfig.elementH * 216) / 384 +
                    'px'
                "
              />
              <span
                :style="
                  'font-size:' +
                    (this.widgeConfig.fontSize * 4) / 3 +
                    'px;color:#' +
                    this.widgeConfig.fontColor +
                    ';letter-spacing:' +
                    (this.widgeConfig.spacings == 0
                      ? 0
                      : (this.widgeConfig.spacings / 72) * 96 - 2) +
                    'px;line-height:100%;'
                "
                v-else
                >{{ this.widgeConfig.text }}</span
              >
            </div>
          </div>
        </div>
        <!-- 大组件 end -->
      </div>
      <!-- 中组件 start -->
      <div class="bg-phone1" v-else>
        <div style="padding: 525px 34px 0px 32px;">
          <div class="bg-phone-content" style="text-align: left;">
            <!-- width:100%;height:auto 2.76-->
            <!-- image -->
            <img
              :src="this.widge.image"
              :style="
                'border-radius: 25px;width:' +
                  (this.widgeConfig.canvasW * 216) / 384 +
                  'px;height:' +
                  (this.widgeConfig.canvasH * 216) / 384 +
                  'px;text-align:left'
              "
            />
            <!-- width:' + this.widgeConfig.elementW /1.8 + 'px; -->
            <div
              :style="
                'text-align:' +
                  this.widgeConfig.textAlign +
                  ';width:' +
                  (this.widgeConfig.elementW * 216) / 384 +
                  'px;position: absolute;color:#' +
                  this.widgeConfig.fontColor +
                  ';height:' +
                  (this.widgeConfig.elementH * 216) / 384 +
                  'px;left:' +
                  (this.widgeConfig.elementX * 216) / 384 +
                  'px;top:' +
                  (this.widgeConfig.elementY * 216) / 384 +
                  'px;font-family:' +
                  this.widgeConfig.fontName +
                  ';line-height:100%;'
              "
            >
              <img
                v-if="this.widgeConfig.element == 2"
                :src="this.widgeConfig.image"
                :style="
                  'margin-top:0px;height:' +
                    (this.widgeConfig.elementH * 216) / 384 +
                    'px'
                "
              />
              <span
                :style="
                  'font-size:' +
                    (this.widgeConfig.fontSize * 72) / 96 +
                    'px;color:#' +
                    this.widgeConfig.fontColor +
                    ';letter-spacing:' +
                    (this.widgeConfig.spacings == 0
                      ? 0
                      : (this.widgeConfig.spacings / 72) * 96 - 2) +
                    'px;line-height:100%;'
                "
                v-else
                >{{ this.widgeConfig.text }}</span
              >
            </div>
          </div>
        </div>
      </div>
      <!-- 中组件 end -->
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      dataForm: {
        id: 0
      },
      widge: {},
      widgeConfig: {}
    };
  },
  methods: {
    init(id) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        if (this.dataForm.id) {
          this.$http({
            url: this.$http.adornUrl(`/widge/widge-config/info/${id}`),
            method: "get",
            params: this.$http.adornParams()
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.widgeConfig = data.widgeConfig;
              console.log("组件的配置信息：");
              console.log(this.widgeConfig);
              this.getWidgeInfo(this.widgeConfig.widgeId);
            }
          });
        }
      });
    },
    getWidgeInfo(widgeId) {
      this.$http({
        url: this.$http.adornUrl(`/widge/widge/info/${widgeId}`),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.widge = data.widge;
          console.log("组件信息：");
          console.log(this.widge);
        }
      });
    }
  }
};
</script>
<style scoped>
.center {
  margin: 0 auto;
  text-align: center;
}
.bg-phone {
  background: url("../../../assets/img/bg-phone.png") no-repeat;
  background-size: 100%;
  /* width: 360px;
  height: 710px; */
  width: 525px;
  height: 1050px;
  padding: 50px 30px 30px 30px;
  margin: 0 auto;
}
.bg-phone1 {
  background: url("../../../assets/img/bg-phone1.png") no-repeat;
  background-size: 100%;
  /* width: 360px;
  height: 710px; */
  width: 525px;
  height: 1050px;
  padding: 50px 30px 30px 30px;
  margin: 0 auto;
}
.bg-phone-content {
  height: 560px;
  border-radius: 5px;
  position: relative;
}
</style>
